<template>
  <div class="all" style="width:100%;height:100%">
    <div class="top">
        <div class="left">
            <div class="word1">双线质量管控体</div>
            <div class="word2">力求每件产品 每个细节都尽善尽美</div>
            <div class="word3">够专心 才放心</div>
            <div class="bg1"></div>
            <div class="bg2"></div>
        </div>
        <div class="right">
            <div class="right1">欢迎使用</div>
            <div class="right2">系统登录
                
            </div>
            <!-- <div class="table"> -->
                <el-form :model="ruleForm" :hide-require-asterisk="true" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="input1">
                    <el-form-item label="用户名" prop="userName">
                        <el-input autosize v-model="ruleForm.userName">
                            <img slot="prefix" src="../../public/image/username.png">
                        </el-input>
                    </el-form-item>
                </div>
                <div class="input2">
                    <el-form-item label="密  码" prop="passWord">
                        <el-input type="password" v-model="ruleForm.passWord" autocomplete="off">
                            <img slot="prefix" src="../../public/image/password.png">
                        </el-input>
                    </el-form-item>
                </div>    
                </el-form>   
            <div class="login" @click="submitForm">登录</div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottomWord">All Rights Reserved ©2021 版权所有	 ｜ 粤ICP备18069755号</div>
        <div class="bottomImg1"><div class="bottomImg2"></div></div>
        
    </div>
  </div>
</template>
<script>

import md5 from 'js-md5'
export default {
  name: 'App',
  components: {
    //HelloWorld
  },
  data(){
    return {
        
        ruleForm: {
            userName: '',
            passWord: ''
        },
        rules: {
            userName: [
                { required:true,message:'请输入用户名', trigger: 'blur' }
            ],
            passWord: [
                { required:true,message:'请输入密码', trigger: 'blur' }
            ]
        }
    }
  },
  methods:{
      submitForm(){
      this.$refs.ruleForm.validate((valid) => {
        if(valid) {
      this.$http({
        url:'/login',
        method:'POST',
        data:{
          userName:this.ruleForm.userName,
          passWord:md5(this.ruleForm.passWord),
          platform:'web'
        }
      }).then(res => {
        if(!res.errorMsg){
          localStorage.setItem('token',res.token)
          localStorage.setItem('user',JSON.stringify(res))
          this.$router.push('/index')
        }
      })
    }
    })
    }
  },
  created(){

  },
  mounted(){

  }
}
</script>

<style scoped> 
    /* scoped表示样式仅对当前页面生效 */
html,body{

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
   position: absolute;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;


}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* body {   
    background: no-repeat center center fixed;
    padding: 0;
    margin: 0;
    background-size: 100% 100%;
    position: absolute;
} */
.all {
    width: 100%;
    height: 100%;
  background: url("../../public/image/background.png");

}
.top {
    display: flex;
}
.bg1 {
    width: 118px;
    height: 162px;
    margin-top: 78px;
    margin-left: 50px;
    background: #E1F2F9;
    border-radius: 0px 0px 0px 0px;
    opacity: 0.3;
}
.bg2 {
    width: 135px;
    height: 164px;
    margin-left: 115px;
    background: #E1F2F9;
    border-radius: 0px 0px 0px 0px;
    opacity: 0.3;
}
.word1 {
    position: absolute;
    width: 23px;
    height: 100px;
    margin-top: 80px;
    margin-left: 100px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    color: #fff;
}
.word2 {
    position: absolute;
    width: 20px;
    height: 256px;
    margin-top: 80px;
    margin-left: 140px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #fff;
}
.word3 {
    position: absolute;
    width: 35px;
    height: 194px;
    margin-top: 120px;
    margin-left: 180px;
    font-size: 28px;
    font-weight: bolder;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #6BB9DA;
}
.right {
    width: 359px;
    margin-top: 78px;
    margin-left: 650px;
    background: #EFEFF0;
    border-radius: 20px 20px 20px 20px;
    opacity: 0.9;
}
.right1 {
    width: 52px;
    height: 16px;
    margin-left: 32px;
    margin-top: 23px;
    font-size: 13px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #96A3B0;
}
.right2 {
    width: 333px;
    height: 30px;
    margin-top: 6px;
    margin-left: 32px;
    font-size: 27px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #4E4E4E;
}
.input1 {
    width: 320px;
    height: 37px;
    margin-top: 20px;
    margin-left: -15px;
    opacity: 1;
    background-repeat: no-repeat;
    background-position:  0;
}
.input2 {
    width: 320px;
    height: 37px;
    margin-top: 20px;
    margin-left: -15px;
    opacity: 1;
    background-repeat: no-repeat;
    background-position:  0;
}
.login {
    width: 295px;
    height: 37px;
    margin-top: 52px;
    margin-left: 30px;
    text-align: center;
    line-height: 37px;
    color: #ffffff;
    background: #409EFF;
    border-radius: 19px 19px 19px 19px;
    opacity: 1;
}
.bottom {
    margin-top: 180px;
    display: flex;
    margin-left: 450px;
    font-size: 13px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    color: #565656;

}
.bottomImg1 {
    width: 200px;
    height: 50px;
    margin-left: 200px;
    background: url("../../public/image/downwhite.png");
}
.bottomImg2 {
    width: 112px;
    height: 25px;
    margin-top: 30px;
    margin-left: -5px;
    background: url("../../public/image/downblue.png");
}

/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */
</style>
